<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <title>better-scroll在线练习</title>
  <style>
    body {margin: 0; padding: 0; font-size: 14px;}
    ul, li {margin: 0; padding: 0; list-style: none;}
    .wrapper {
      width: 100vw;
      height: 100vh;
      overflow: hidden;
    }
    .list li {
      height: 30px;
      line-height: 30px;
      border-bottom: 1px solid #000;
      box-sizing: border-box;
      padding: 0 6px;
    }
  </style>
  <script src="https://unpkg.com/better-scroll@latest/dist/better-scroll.min.js"></script>
</head>
<body>
  <div class="wrapper"> 
    <ul class="list"></ul>
  </div>
  <script>
    // better-scroll最基础的使用  
    let wrapper = document.querySelector('.wrapper');
    let list = document.querySelector('.list');   
    
    let mockData = [...('.'.repeat(100))].map((item, idx) => {
      return `<li>我是第${idx}索引的li</li>`
    }).join('');
    list.innerHTML = mockData; 

    let scroll = BetterScroll.createBScroll(wrapper, {});
  </script>
</body>
</html>